<template>
  <div id="container">
    <div class="fire-works"></div>
    <TrueFocus sentence="Numb Tool" :manualMode="false" :blurAmount="5" borderColor="red" :animationDuration="1" :pauseBetweenAnimations="1" />
  </div>
</template>

<script lang="ts" setup>
import { Fireworks } from "fireworks-js";
import TrueFocus from "./components/TrueFocus.vue";

onMounted(() => {
  // 初始化Fireworks
  const fireworksRef = document.querySelector(".fire-works");
  const fireworks = new Fireworks(fireworksRef!, {
    autoresize: true,
    opacity: 0.5,
    acceleration: 1.05,
    friction: 0.97,
    gravity: 1.5,
    particles: 50,
    traceLength: 3,
    traceSpeed: 10,
    explosion: 5,
    intensity: 30,
    flickering: 50,
    lineStyle: "round",
    hue: {
      min: 0,
      max: 360,
    },
    delay: {
      min: 30,
      max: 60,
    },
    rocketsPoint: {
      min: 50,
      max: 50,
    },
    lineWidth: {
      explosion: {
        min: 1,
        max: 3,
      },
      trace: {
        min: 1,
        max: 2,
      },
    },
    brightness: {
      min: 50,
      max: 80,
    },
    decay: {
      min: 0.015,
      max: 0.03,
    },
    mouse: {
      click: false,
      move: false,
      max: 1,
    },
  });
  // 启动Fireworks
  fireworks.start();
});
</script>

<style lang="scss" scoped>
#container {
  height: calc(100vh - 84px);
  position: relative;
  display: flex; // 使用 flex 布局
  justify-content: center; // 水平居中
  align-items: center; // 垂直居中
  .fire-works {
    height: 100%;
    width: 100%; // 确保铺满容器
    position: absolute; // 绝对定位，让烟花背景覆盖整个容器
    top: 0;
    left: 0;
  }
}
</style>
